{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    忘记密码
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <style>
        #content {
            width: 40%;
            margin-left: 25%;
            height: 400px;
            padding: 20px;
            background-color: #2a6496;
            margin-top: 40px;
            margin-bottom: 40px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px #000000;
        }

        #contentForm input {
            margin-top: 10px;
            margin-bottom: 50px;
            width: 300px;
            height: 30px;
            border: none;
            padding: 3px;
            padding-left: 30px;
            border-radius: 5px;
        }

        #content form {
            margin: 20px;
            text-align: left
        }

        #contentForm {
            font-size: 15px;
            margin-top: 50px;
        }

        #content p {
            color: red;
        }

        .rusername {
            margin-top: 10px;
            margin-bottom: 40px;
            width: 200px;
            height: 30px;
            border: none;
            padding: 3px;
            padding-left: 10px;
        }

        .rpassword {
            margin-top: 10px;
            width: 200px;
            margin-bottom: 20px;
            height: 30px;
            border: none;
            padding: 3px;
            padding-left: 10px;
        }

        #btn {
            background: #2f435e;
            color: #f2f2f2;

            padding: 10px 30px 10px 30px;
            font-size: 16px;
            font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
            font-weight: bold;
            border-radius: 3px;
            border: none;
        }
        #btn:hover{
            background: #9e4177;

        }
    </style>
{% endblock %}

{% block content %}

    <div id=content>
        <script type="text/javascript">
            alert({{ check }});
        </script>
        <p >{{ msg }}{{ errors }}</p>
        <div id="contentForm">
            <form action="{% url 'user:forget_password' %}" method="post">
                {% csrf_token %}
                {{ form.email }}
                {{ form.captcha }}
                <button class="login" id="btn">
                    找回密码
                </button>
            </form>
            <span id="tip">  </span>

        </div>
    </div>



{% endblock %}

{% block my_js %}
    <script type="text/javascript">
    $(function () {
        //刷新动作
        $('.captcha').click(function () {
            var img = $(this);
            $.getJSON('/captcha/refresh', function (data) {
                img.attr('src',data['image_url']);
                $('#id_captcha_0').val(data['key']);
            })
        });

        //验证验证码是否正确
        $('#id_captcha_1').change(function () {
            var key = $('#id_captcha_0').val();
            var code = $(this).val();
            $.getJSON('{% url "user:valide_code" %}', {key:key,code:code}, function (data) {
                console.log(data);
                {#$('#tip').remove();#}
                if (data.status==1){
                    $('#tip').html("验证码正确")
                } else {
                    $('#tip').html("验证码错误")
                }
            })
        })
    })
    </script>
{% endblock %}